<template>
  <div class="qr-generator">
    <button @click="returnFn" class="btn btn-primary retrunBUtton">
      <i class="icon">⚡</i> 返回
    </button>
    <div class="container">
      <header class="tool-header">
        <h1>二维码生成工具</h1>
        <p class="subtitle">使用Vue 3和qrcode库实现的二维码生成器</p>
      </header>

      <div class="tool-content">
        <div class="input-section">
          <div class="input-group">
            <label for="qrText">输入要生成二维码的内容：</label>
            <textarea
              id="qrText"
              v-model="qrText"
              placeholder="输入文本、URL或其他内容..."
              rows="4"
            ></textarea>
          </div>

          <div class="options-section">
            <div class="option-group">
              <label for="qrSize">二维码尺寸：</label>
              <select id="qrSize" v-model="qrSize">
                <option value="128">128x128</option>
                <option value="256">256x256</option>
                <option value="512">512x512</option>
              </select>
            </div>

            <div class="option-group">
              <label for="qrColor">二维码颜色：</label>
              <input type="color" id="qrColor" v-model="qrColor" />
            </div>

            <div class="option-group">
              <label for="bgColor">背景颜色：</label>
              <input type="color" id="bgColor" v-model="bgColor" value="#ffffff" />
            </div>
          </div>
        </div>

        <div class="preview-section">
          <div class="qr-preview">
            <div v-if="qrCodeUrl" class="qr-image-container">
              <img :src="qrCodeUrl" alt="生成的二维码" class="qr-image" />
            </div>
            <div v-else class="placeholder">
              <div class="placeholder-icon">📱</div>
              <p>输入内容后，将在此显示生成的二维码</p>
            </div>
          </div>

          <div class="action-buttons">
            <button class="download-btn" @click="downloadQRCode" :disabled="!qrCodeUrl">
              📥 下载二维码
            </button>
            <button class="reset-btn" @click="resetOptions">🔄 重置选项</button>
          </div>
        </div>

        <div class="info-section">
          <h3>关于二维码</h3>
          <p>
            二维码（QR
            Code）是一种矩阵条形码，能够存储大量信息。它可以被智能手机等设备快速扫描读取，常用于网址链接、联系方式、支付信息等场景。
          </p>
        </div>
      </div>

      <footer class="tool-footer">
        <p>© 2023 Vue 3 二维码生成工具 | 使用QRCode.js库</p>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import QRCode from 'qrcode'
import { useRouter } from 'vue-router'
const qrText = ref('')
const qrSize = ref('256')
const qrColor = ref('#000000')
const bgColor = ref('#ffffff')
const qrCodeUrl = ref('')

const Router = useRouter()

const returnFn = () => {
  Router.go(-1)
}
// 生成二维码
const generateQRCode = async () => {
  if (!qrText.value.trim()) {
    qrCodeUrl.value = ''
    return
  }

  try {
    qrCodeUrl.value = await QRCode.toDataURL(qrText.value, {
      width: parseInt(qrSize.value),
      margin: 2,
      color: {
        dark: qrColor.value,
        light: bgColor.value
      }
    })
  } catch (err) {
    console.error('生成二维码失败:', err)
    qrCodeUrl.value = ''
  }
}

// 监听输入变化，实时生成二维码
watch([qrText, qrSize, qrColor, bgColor], () => {
  generateQRCode()
}, { immediate: true })

// 下载二维码
const downloadQRCode = () => {
  if (!qrCodeUrl.value) return

  const link = document.createElement('a')
  link.download = `qrcode-${Date.now()}.png`
  link.href = qrCodeUrl.value
  link.click()
}

// 重置选项
const resetOptions = () => {
  qrText.value = ''
  qrSize.value = '256'
  qrColor.value = '#000000'
  bgColor.value = '#ffffff'
}
</script>

<style scoped>
.btn {
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(to right, #1a2a6c, #b21f1f);
  color: white;
}
.retrunBUtton {
  position: absolute;
  top: 100px;
  right: 100px;
}

.qr-generator {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1200px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.tool-header {
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  padding: 25px 30px;
  text-align: center;
}

.tool-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 600;
}

.subtitle {
  font-size: 20px;
  opacity: 0.9;
}

.tool-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
  font-size: 20px;
}

textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 20px;
  resize: vertical;
  transition: border-color 0.3s;
  font-family: inherit;
}

textarea:focus {
  outline: none;
  border-color: #667eea;
}

.options-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-group label {
  font-weight: 600;
  color: #555;
  font-size: 18px;
}

select,
input[type='color'] {
  padding: 10px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 18px;
  transition: border-color 0.3s;
}

select:focus,
input[type='color']:focus {
  outline: none;
  border-color: #667eea;
}

input[type='color'] {
  height: 45px;
  cursor: pointer;
}

.preview-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qr-preview {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border: 2px dashed #ddd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}

.qr-image-container {
  padding: 15px;
}

.qr-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.placeholder {
  text-align: center;
  color: #888;
  padding: 30px;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.placeholder p {
  margin: 0;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.download-btn,
.reset-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.download-btn {
  background: linear-gradient(to right, #4caf50, #45a049);
  color: white;
}

.download-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.download-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.reset-btn {
  background: #f0f0f0;
  color: #666;
  border: 1px solid #ddd;
}

.reset-btn:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

.info-section {
  margin-top: 20px;
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 15px;
  border-radius: 0 8px 8px 0;
}

.info-section h3 {
  color: #1565c0;
  margin-bottom: 10px;
  font-size: 18px;
}

.info-section p {
  color: #424242;
  line-height: 1.6;
  font-size: 18px;
  margin: 0;
}

.tool-footer {
  text-align: center;
  padding: 20px;
  color: #757575;
  font-size: 18px;
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 768px) {
  .qr-generator {
    padding: 10px;
  }

  .container {
    border-radius: 12px;
  }

  .tool-content {
    padding: 20px;
    gap: 20px;
  }

  .options-section {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .download-btn,
  .reset-btn {
    width: 100%;
  }
}
</style>